<template>
  <div @mousemove="handleMove" @click="handleClick" class="container">
    <div style="display: flex">
      <MainTank :fwdColor="fwdColor1" :aftColor="aftColor1" class="tank_1" />
      <CenterTank
        :cLeftColor="cLeftColor"
        :cRightColor="cRightColor"
        :crossColor="crossColor"
        style="margin-left: -20px"
      />
      <MainTank
        :fwdColor="fwdColor2"
        :aftColor="aftColor2"
        style="margin-left: -20px"
        direction
        message="R  MAIN"
        class="tank_2"
      />
    </div>
    <div style="margin-top: 120px">
      <span style="margin-left: 10px; color: rgb(8, 214, 255); font-weight: 600"
        >MIN&nbsp;FUEL&nbsp;TEMP</span
      >
      <span style="margin-left: 10px; font-weight: 600">-37C</span>
      <br />
      <span style="margin-left: 10px; color: rgb(8, 214, 255); font-weight: 600"
        >FUEL&nbsp;TEMP</span
      >
      <span style="margin-left: 10px; font-weight: 600">+14C</span>
    </div>
  </div>
</template>

<script setup>
import MainTank from "@/views/learning/simulator/components/lower/fuel/MainTank.vue";
import CenterTank from "@/views/learning/simulator/components/lower/fuel/CenterTank.vue";
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { useStore } from "vuex";

const fwdColor1 = reactive({
  color: "rgb(8, 214, 255)",
});
const aftColor1 = reactive({
  color: "rgb(8, 214, 255)",
});
const fwdColor2 = reactive({
  color: "rgb(8, 214, 255)",
});
const aftColor2 = reactive({
  color: "rgb(8, 214, 255)",
});
const store = useStore();

const cLeftColor = reactive({
  color: "rgb(8, 214, 255)",
});
const cRightColor = reactive({
  color: "rgb(8, 214, 255)",
});
const crossColor = reactive({
  color: "rgb(8, 214, 255)",
});

onMounted(() => {
  window.addEventListener("keydown", handleKeydown); // 在组件挂载时添加键盘事件监听
});

onBeforeUnmount(() => {
  window.removeEventListener("keydown", handleKeydown); // 在组件销毁时移除事件监听
});

const boxes = [
  { x: 20, y: 238, width: 50, height: 55 }, //lFwdPump
  { x: 20, y: 310, width: 50, height: 55 }, //lAftPump
  { x: 532, y: 238, width: 50, height: 55 }, //rFwdPump
  { x: 532, y: 310, width: 50, height: 55 }, //rAftPump
  { x: 236, y: 310, width: 50, height: 55 }, //cLeftPump
  { x: 318, y: 310, width: 50, height: 55 }, //cRightPump
  { x: 285, y: 170, width: 40, height: 40 }, //fwdCrossPump
  { x: 285, y: 250, width: 40, height: 40 }, //aftCrossPump
];

let clickItem = null;

const handleMove = (event) => {
  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  if (
    x >= boxes[0].x &&
    x <= boxes[0].x + boxes[0].width &&
    y >= boxes[0].y &&
    y <= boxes[0].y + boxes[0].height
  ) {
    document.body.style.cursor = "pointer";
    fwdColor1.color = "rgb(8, 255, 66)";
    clickItem = "lFwdPump";
  } else if (
    x >= boxes[1].x &&
    x <= boxes[1].x + boxes[1].width &&
    y >= boxes[1].y &&
    y <= boxes[1].y + boxes[1].height
  ) {
    document.body.style.cursor = "pointer";
    aftColor1.color = "rgb(8, 255, 66)";
    clickItem = "lAftPump";
  } else if (
    x >= boxes[2].x &&
    x <= boxes[2].x + boxes[2].width &&
    y >= boxes[2].y &&
    y <= boxes[2].y + boxes[2].height
  ) {
    document.body.style.cursor = "pointer";
    fwdColor2.color = "rgb(8, 255, 66)";
    clickItem = "rFwdPump";
  } else if (
    x >= boxes[3].x &&
    x <= boxes[3].x + boxes[3].width &&
    y >= boxes[3].y &&
    y <= boxes[3].y + boxes[3].height
  ) {
    document.body.style.cursor = "pointer";
    aftColor2.color = "rgb(8, 255, 66)";
    clickItem = "rAftPump";
  } else if (
    x >= boxes[4].x &&
    x <= boxes[4].x + boxes[4].width &&
    y >= boxes[4].y &&
    y <= boxes[4].y + boxes[4].height
  ) {
    document.body.style.cursor = "pointer";
    cLeftColor.color = "rgb(8, 255, 66)";
    clickItem = "cLeftPump";
  } else if (
    x >= boxes[5].x &&
    x <= boxes[5].x + boxes[5].width &&
    y >= boxes[5].y &&
    y <= boxes[5].y + boxes[5].height
  ) {
    document.body.style.cursor = "pointer";
    cRightColor.color = "rgb(8, 255, 66)";
    clickItem = "cRightPump";
  } else if (
    x >= boxes[6].x &&
    x <= boxes[6].x + boxes[6].width &&
    y >= boxes[6].y &&
    y <= boxes[6].y + boxes[6].height
  ) {
    document.body.style.cursor = "pointer";
    crossColor.color = "rgb(8, 255, 66)";
    clickItem = "fwdCrossValve";
  } else if (
    x >= boxes[7].x &&
    x <= boxes[7].x + boxes[7].width &&
    y >= boxes[7].y &&
    y <= boxes[7].y + boxes[7].height
  ) {
    document.body.style.cursor = "pointer";
    crossColor.color = "rgb(8, 255, 66)";
    clickItem = "aftCrossValve";
  } else {
    document.body.style.cursor = "default";
    if (clickItem) {
      switch (clickItem) {
        case "lFwdPump":
          fwdColor1.color = "rgb(8, 214, 255)";
          break;
        case "lAftPump":
          aftColor1.color = "rgb(8, 214, 255)";
          break;
        case "rFwdPump":
          fwdColor2.color = "rgb(8, 214, 255)";
          break;
        case "rAftPump":
          aftColor2.color = "rgb(8, 214, 255)";
          break;
        case "cLeftPump":
          cLeftColor.color = "rgb(8, 214, 255)";
          break;
        case "cRightPump":
          cRightColor.color = "rgb(8, 214, 255)";
          break;
        case "fwdCrossValve":
          crossColor.color = "rgb(8, 214, 255)";
          break;
        case "aftCrossValve":
          crossColor.color = "rgb(8, 214, 255)";
          break;
        default:
          console.log("Unknown clickItem");
      }
    }
  }
};

const handleClick = (event) => {
  const container = document.querySelector(".simulator_container");
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // 检查点击是否在有效区域内
  let validClick = false;
  let actionToDispatch = null;
  
  for (let i = 0; i < boxes.length; i++) {
    if (
      x >= boxes[i].x &&
      x <= boxes[i].x + boxes[i].width &&
      y >= boxes[i].y &&
      y <= boxes[i].y + boxes[i].height
    ) {
      validClick = true;
      
      switch (i) {
        case 0: actionToDispatch = "fuel/setLFwdPump"; break;
        case 1: actionToDispatch = "fuel/setLAftPump"; break;
        case 2: actionToDispatch = "fuel/setRFwdPump"; break;
        case 3: actionToDispatch = "fuel/setRAftPump"; break;
        case 4: actionToDispatch = "fuel/setcLeftPump"; break;
        case 5: actionToDispatch = "fuel/setcRightPump"; break;
        case 6: actionToDispatch = "fuel/setFwdCrossPump"; break;
        case 7: actionToDispatch = "fuel/setAftCrossPump"; break;
      }
      
      break;
    }
  }
  
  // 只有在有效区域内点击才执行操作
  if (validClick && actionToDispatch) {
    store.dispatch(actionToDispatch);
  }
};

const handleKeydown = (event) => {
  // 将按键转换为大写字母
  const key = event.key.toUpperCase();

  const keyActions = {
    Q: () => store.dispatch("fuel/setFwdCrossPump"),
    W: () => store.dispatch("fuel/setAftCrossPump"),
    E: () => store.dispatch("fuel/setcLeftPump"),
    R: () => store.dispatch("fuel/setcRightPump"),
    A: () => store.dispatch("fuel/setLFwdPump"),
    S: () => store.dispatch("fuel/setLAftPump"),
    D: () => store.dispatch("fuel/setRFwdPump"),
    F: () => store.dispatch("fuel/setRAftPump"),
  };

  // 如果按键有对应的动作，则执行
  if (keyActions[key]) {
    keyActions[key]();
  }
};
</script>

<style scoped>
.container {
  height: 591px;
  width: 634px;
}

.tank_1 {
  margin-top: 150px;
}

.tank_2 {
  margin-top: 150px;
}
</style>
